{extend name="./app/admin/view/main.html" /}
{block name="title"}分类管理 - 文章 -{__block__}{/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}

<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">文章</h4> <h5 class="sub-title">分类管理</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='categoryAddDialog'>
            <span><Icon type="md-add"></Icon> 添加分类</span>
        </button>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="mip-box">
        <section class="mip-box-body">
            <section class="diy-table-list" v-cloak>

                <table class="table table-hover diy-table-list">
                    <thead>
                    <tr class="diy-table-item-header">
                        <th style="width:40px">&nbsp;</th>
                        <th style="width:100px">ID</th>
                        <th style="width:200px">名称 </th>
                        <th> 描述 </th>
                        <th style="width:100px">排序</th>
                        <th style="width:160px">分类地址</th>
                        <th style="width:100px">操作</th>
                    </tr>
                    </thead>

                    <tbody class="diy-table-body">
                    <template v-if='categoryList' v-for='(item,index) in categoryList'>
                        <tr class="tr1 diy-table-item">
                            <td>
                                <i-Button type="button" size="small" v-if='item.children.length'
                                          @click='openChildren(item)'>
                                    <Icon type="ios-arrow-forward" v-if='!item.isOpen'></Icon>
                                    <Icon type="ios-arrow-down"  v-if='item.isOpen'></Icon>
                                </i-Button>
                            </td>
                            <td>{{item.id}}</td>
                            <td><a :href="item.url" target="_blank">{{item.title}}</a> </td>
                            <td> {{item.description}} </td>

                            <td>
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveUp(item)'
                                          :disabled='index==0'>
                                    <Icon type="md-arrow-round-up" />
                                </i-Button>
                                <i-Button type="text" size="small" class='ivu-btn-text-up-down' @click='moveDown(item)'
                                          :disabled='categoryList.length==index+1'>
                                    <Icon type="md-arrow-round-down" />
                                </i-Button>
                            </td>
                            <td> {{item.url}}  </td>
                            <td>
                                <Button-Group size="small" shape="circle">
                                    <i-button type="success" @click="categoryEditDialog(index, item)">修改</i-button>
                                    <i-button type="warning" :disabled="item.children.length != 0" @click="categoryDel(index, item)">删除</i-button>
                                </Button-Group>
                            </td>
                        </tr>

                        <tr :class='{"is-open":item.isOpen,"tr-child":true}' v-if='item.children.length != 0'
                            v-for='(item2,index2) in item.children'>
                            <td></td>
                            <td style="padding-left:10px"> {{item2.id}} </td>
                            <td style="padding-left:10px"><a :href="item2.url" target="_blank">{{item2.title}}</a> </td>
                            <td> {{item2.description}} </td>

                            <td>
                                <i-button type="text" size="small" @click='moveUp(item, item2)' :disabled='index2==0'>
                                    <Icon type="md-arrow-round-up" />
                                </i-button>
                                <i-button type="text" size="small" @click='moveDown(item, item2)' :disabled='item.children.length==index2+1'>
                                    <Icon type="md-arrow-round-down" />
                                </i-button>
                            </td>

                            <td>  {{item2.url}}  </td>
                            <td>
                                <Button-Group size="small" shape="circle">
                                <i-button type="success" @click="categoryEditDialog(index2, item2)">修改</i-button>
                                <i-button type="warning" @click="categoryDel(index2, item2)">删除</i-button>
                                </Button-Group>
                            </td>
                        </tr>
                    </template>

                    <template v-if="categoryList.length==0">
                        <tr>
                            <td colspan="7" class="no-block">
                                <Icon type="ios-filing-outline"></Icon>
                                <p>暂无数据</p>
                            </td>
                        </tr>
                    </template>
                    </tbody>

                </table>

            </section>
        </section>
    </section>
</main>
<Modal v-model="dialogCategory" size="large" v-cloak>
    <i-form :model="category" :rules="categoryRules" ref="category" :label-width="100">
        <Tabs :animated='false' v-model="itemTabsValue">
            <Tab-Pane label="基础信息" name='default'>
                <Form-Item label="所属上级分类" prop="title">
                    <i-Select v-model="category.pid" transfer style="width:200px"
                              :disabled='category.saveStatus =="edit" && category.pid == 0 && category.isChild'>
                        <i-Option v-for="item in rootCategoryList" :disabled="item.disabled" :value="item.id"
                                  :key="item.id">{{ item.title }}
                        </i-Option>
                    </i-Select>
                </Form-Item>
                <Form-Item label="分类名称" prop="title">
                    <i-input v-model="category.title" placeholder="例：平步新闻"></i-input>
                    <span class="form-note">默认显示在前台网页的title</span>
                </Form-Item>
                <Form-Item label="描述">
                    <i-input type="textarea" v-model="category.description" placeholder="请输入description描述信息"></i-input>
                    <span class="form-note">在页面的隐藏的网页描述部分，对于SEO有一定帮助</span>
                </Form-Item>

                <Form-Item label="列表URL">
                    <i-Select v-model="category.list_preurl" transfer style="width:200px">
                        <i-Option v-for="item in list_preurls" :value="item" :key="item">{{ item }}</i-Option>
                    </i-Select>
                    <span class="form-note">列表页面的URL</span>
                </Form-Item>
                <Form-Item label="详情URL">
                    <i-Select v-model="category.detail_preurl" transfer style="width:200px">
                        <i-Option v-for="item in detail_preurls" :value="item" :key="item">{{ item }}</i-Option>
                    </i-Select>
                    <span class="form-note">详情页面的URL</span>
                </Form-Item>
            </Tab-Pane>

        </Tabs>
    </i-form>
    <div slot="footer" class="dialog-footer">

        <i-button type="primary" @click="categoryPost('category',category)">确 定</i-button>
        <i-button @click="dialogCategory = false">取 消</i-button>
    </div>
</Modal>

{/block}

{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            dialogCategory: false,
            dialogCategoryTitle: '',

            saveStatus: 'add',

            category: {
                isChild: false,
                id: '',
                pid: 0,
                title: '',
                description: '',
                list_preurl: '',
                detail_preurl: '',

            },
            categoryRules: {
                name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }],
            },

            categoryList: [],
            rootCategoryList: [],
            list_preurls: [],
            detail_preurls: [],
            itemTabsValue: 'default',
        },
        watch: {},
        mounted() {
            this.getTemplatePreurls();
            this.getCategoryList();
        },
        methods: {
            moveUp(item, subItem) {
                var categoryList = this.categoryList;
                for (var i = 0; i < categoryList.length; i++) {
                    categoryList[i].sort = i;
                    if (categoryList[i].children.length) {
                        for (var j = 0; j < categoryList[i].children.length; j++) {
                            categoryList[i].children[j].sort = j;
                        }
                    }
                }
                if (!subItem) {
                    for (var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                            categoryList[i - 1].sort = i;
                            categoryList[i].sort = i - 1;
                        }
                    }
                } else {
                    for (var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                            for (var j = 0; j < categoryList[i].children.length; j++) {
                                if (subItem.id == categoryList[i].children[j].id) {
                                    categoryList[i].children[j - 1].sort = j;
                                    categoryList[i].children[j].sort = j - 1;
                                }
                            }
                        }
                    }

                }
                this.categoryList = categoryList;
                this.categorySortSave();
            },
            moveDown(item, subItem) {
                var categoryList = this.categoryList;
                for (var i = 0; i < categoryList.length; i++) {
                    categoryList[i].sort = i;
                    if (categoryList[i].children.length) {
                        for (var j = 0; j < categoryList[i].children.length; j++) {
                            categoryList[i].children[j].sort = j;
                        }
                    }
                }
                if (!subItem) {
                    for (var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                            categoryList[i + 1].sort = i;
                            categoryList[i].sort = i + 1;
                        }
                    }
                } else {
                    for (var i = 0; i < categoryList.length; i++) {
                        if (item.id == categoryList[i].id) {
                            for (var j = 0; j < categoryList[i].children.length; j++) {
                                if (subItem.id == categoryList[i].children[j].id) {
                                    categoryList[i].children[j + 1].sort = j;
                                    categoryList[i].children[j].sort = j + 1;
                                }
                            }
                        }
                    }
                }
                this.categoryList = categoryList;
                this.categorySortSave();
            },
            openChildren(item) {
                var categoryList = this.categoryList;
                for (var i = 0; i < categoryList.length; i++) {
                    if (item.id == categoryList[i].id) {
                        categoryList[i].isOpen = !categoryList[i].isOpen;
                    }
                }
                this.categoryList = categoryList;
            },
            getTemplatePreurls() {
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/get_info_by_filename', {}).then(res => {
                    if (res.code == 1) {
                        this.list_preurls = res.data.info.article_list_preurls;
                        this.detail_preurls = res.data.info.article_detail_preurls;
                    }
                });
            },
            categoryAddDialog: function () {
                this.saveStatus = 'add';
                this.itemTabsValue = 'default';

                this.category.isChild = false;
                this.category.pid = 0;
                this.category.title = '';
                this.category.description = '';
                this.category.list_preurl = '';
                this.category.detail_preurl = '';
                this.category.id = '';

                this.dialogCategory = true;
                this.dialogCategoryTitle = '添加分类';
            },
            categorySortSave() {
                var itemList = this.categoryList;
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_sort_save', {
                    itemList: itemList,
                }).then(res => {
                    if (res.code == 1) {
                        this.$Message.success('操作成功');
                        this.getCategoryList();
                    }
                });
            },
            categoryPost(val, param) {

                if(this.category.list_preurl == '' ){
                    this.category.list_preurl = this.list_preurls[0];
                }
                if(this.category.detail_preurl == '' ){
                    this.category.detail_preurl = this.detail_preurls[0];
                }

                this.$refs[val].validate((valid) => {
                    if (valid) {
                        if (this.saveStatus == 'add') {
                            this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_add', this.category).then(res => {
                                if (res.code == 1) {
                                    this.dialogCategory = false;
                                    this.$Message.success(res.msg);
                                    this.getCategoryList();
                                }
                            });
                        } else {
                            this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_edit', this.category).then(res => {
                                if (res.code == 1) {
                                    this.dialogCategory = false;
                                    this.$Message.success(res.msg);
                                    this.getCategoryList();
                                }
                            });
                        }
                    }
                });
            },
            categoryDel(index, val) {
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p style="color:#ff9900;">删除项：' + val.name + '</p><p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/do_del', {
                            id: val.id,
                        }).then(res => {
                            if (res.code == 1) {
                                this.$Message.success(res.msg);
                                this.getCategoryList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getCategoryList: function () {
                this.$mip.ajax('{$mipInfo.domain}/article/ApiAdminArticleCategory/get_list', {}).then(res => {
                    if (res.code == 1) {
                        var categoryList = res.data.categoryList;
                        for (var i = 0; i < categoryList.length; i++) {
                            categoryList[i].isOpen = true;
                        }

                        this.categoryList = categoryList;

                        var tempCategoryList = [{id: 0, pid: 0, title: '顶层分类'}];
                        for (var i = 0; i < categoryList.length; i++) {
                            categoryList[i].disabled = false;
                            if (categoryList[i].pid == 0) {
                                tempCategoryList.push(categoryList[i]);
                            }
                        }
                        this.rootCategoryList = tempCategoryList;
                    }
                });
            },
            categoryEditDialog(index, row) {

                this.itemTabsValue = 'default';
                this.dialogCategory = true;
                this.dialogCategoryTitle = '编辑分类';

                this.saveStatus = 'edit';
                this.category.title = row.title;
                this.category.description = row.description;
                this.category.pid = row.pid;

                this.category.list_preurl = row.list_preurl;
                this.category.detail_preurl = row.detail_preurl;

                this.category.id = row.id;
                this.category.isChild = false;

                if (row.pid == 0) {
                    for (var i = 0; i < this.categoryList.length; i++) {
                        if (row.id == this.categoryList[i].id) {
                            this.categoryList[i].disabled = true;
                            if (row.children.length > 0) {
                                this.category.isChild = true;
                            }
                        } else {
                            this.categoryList[i].disabled = false;
                        }
                    }
                }
            },


        }
    })
</script>
{/block}